import React, {useEffect, useState} from 'react';
import {useNavigate} from "react-router-dom";
import { Row, Col } from 'antd'
import moment from "moment";
import './index.less'
import {Get, Url} from "../../server/http";

const weekStr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let timer1 = null, timer2 = null;

const Header = () => {
	const navigate = useNavigate();
	const [date, setDate] = useState(moment().format('YYYY年MM月DD日'))
	const [time, setTime] = useState(moment().format('HH:mm'))
	const [week, setWeek] = useState(weekStr[moment().day()])
	const [runTime, setRunTime] = useState(0)

	useEffect(() => {
		// 清理timer
		if (timer1!==null) {
			clearInterval(timer1);
		}
		if (timer2 !== null) {
			clearInterval(timer2);
		}
		timer1 = setInterval(getTime, 5000);        // 5秒更新一次页面显示时钟

		return () => {
			// 清理timer
			if (timer1!==null) {
				clearInterval(timer1);
				timer1 = null;
			}
			if (timer2 !== null) {
				clearInterval(timer2);
				timer2 = null
			}
		}
	}, [])


	// 循环更新时间
	const getTime = () => {
		let time = moment().format('HH:mm');
		let date = moment().format('YYYY年MM月DD日');
		let week = moment().day();
		setDate(date);
		setTime(time);
		setWeek(weekStr[week])
	}

	// 返回首页
	const onClick = (path) => {
		navigate('/'+path)
	}


	return (
		<div className={'screen-head'}>
			<div className={'screen-head-title'}>宜昌市点军区清廉乡村数智监督平台</div>
			<div className={'screen-head-text'}>
				<Row type={'flex'}>
					<span className={'screen-head-time'}>{time}</span>
					<div className={'screen-head-divider'}/>
					<div className={'screen-head-date'}>
						<div>{week}</div>
						<div>{date}</div>
					</div>
				</Row>
			</div>
			<div className={'screen-head-running'}>
				{/*<div className={'screen-head-running-title'}>平台运行时间</div>*/}
				<div className={'screen-head-running-text'}>
					三资情况
					<span style={{color: 'white', cursor: 'pointer', marginLeft: '1vw'}} onClick={()=>onClick('base/member')}>数据中台</span>
					<span style={{color: 'white', cursor: 'pointer', marginLeft: '1vw'}} onClick={()=>onClick('home')}>返回首页</span>
				</div>
			</div>
		</div>
	);
};

export default Header;
